<template>
  <div>
    <div class="box">
      <div class="collect">
        <span class="el-icon-collection-tag"></span>
        <p>我的收藏</p>
      </div>
      <div class="downline"></div>
      <div class="main">
        <div
          class="box-1"
          v-for="(item, index) in collectList"
          :key="index"
        
        >
          <!-- <el-popconfirm title="这是一段内容确定删除吗？">
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="delet(item.product_id)"
                >确定</el-button
              >
            </div>
            <i class="el-icon-close span" slot="reference"></i>
          </el-popconfirm> -->

<el-popover
  placement="top"
  width="300"
  v-model="visible">
  <p class="cp">这是一段内容这是一段内容确定删除吗？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="delet(item.product_id)">确定</el-button>
  </div>
      <i class="el-icon-close span" slot="reference"></i>
</el-popover>

          <img
            @click="goto(item.product_id)"
            :src="'http://101.132.181.9:3000/' + item.product_picture"
            alt=""
            width="150px"
            height="150px"
          />
          <div class="box-2">
            <p class="n1">{{ item.product_name }}</p>
            <p style="color: grey" class="n2">{{ item.product_title }}</p>
            <p>
              <span style="color: orange">{{ item.product_selling_price }}</span
              ><s style="color: grey">{{ item.product_price }}</s>
            </p>
          </div>
        </div>
        <!-- 列表为空显示的内容 -->
        <!-- <div class="clear" v-else>
          <div class="cmain">
            <h2>收藏还是空的</h2>
            <p>快去购物吧！</p>
          </div>
        </div> -->
        <!-- 空end -->
      </div>
    </div>
  </div>
</template>

<script>
import { collectList ,deleteCollect} from "../api/api";
export default {
  data() {
    return {
      collectList: [], //收藏的数据
  
    };
  },
  created() {
    this.getcollectList();
  },
  methods: {
    async delet(pid){
    
         let res=await deleteCollect({
                user_id: this.$store.getters.getUser.user_id,
                product_id:pid
         })
         this.getcollectList()
         console.log(res,'删除',75)

    },
    //跳转详情
    goto(v) {
      //  console.log(v,"v")
      this.$router.push({
        name: "details",
        params: {
          productID: v,
        },
      });
    },
    async getcollectList() {
      let res = await collectList({
        user_id: this.$store.getters.getUser.user_id,
      });
      console.log(res, 42);
      //  if(res.code=='401'){
      //   this.$message(res.msg)
      //  }
      if (res.code == "001") {
        this.collectList = res.collectList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cp{
  font-size: 10px;
}
.clear {
  width: 100%;
  height: 300px;
}
.n1 {
  font-size: 15px;
}
.n2 {
  font-size: 10px;
}
.box-1:hover .span {
  display: block;
}
.box-1 {
  display: flex;
  background-color: white;
  width: 23%;
  height: 350px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
  .span {
    position: absolute;
    right: 10px;
    top: 5px;
    display: none;
  }
}
.box-2 {
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 10px;
}
.main {
  width: 100%;
  // height: 1200px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-around;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.box {
  width: 1200px;
  background-color: white;
  margin: 0 auto;
}
.collect {
  display: flex;
}
.el-icon-collection-tag {
  font-size: 50px;
  color: orange;
}
p {
  font-size: 30px;
  margin-top: 8px;
}
.downline {
  width: 100%;
  height: 2px;
  background-color: orange;
}
</style>